<template>
    <div class="visitor">
        <el-card class="card" shadow="hover">
            <!-- card body -->
            <div class="top">
                <div class="name">
                    <span>{{ visitor.isInsure == 1 ? '医保' : '自费' }}</span>
                    {{ visitor.name }}
                </div>
                <div class="button">
                    <el-button :icon="Edit" type="text" size="small" @click="editHandle"></el-button>
                </div>
            </div>
            <div class="bottom">
                <div class="content">
                    <el-descriptions column="1">
                        <el-descriptions-item label="证件类型 :">{{ visitor.param.certificatesTypeString
                            }}</el-descriptions-item>
                        <el-descriptions-item label="证件号码 :">{{ visitor.certificatesNo }}</el-descriptions-item>
                        <el-descriptions-item label="用户性别 :">{{ visitor.sex == 0 ? '女' : '男' }}</el-descriptions-item>
                        <el-descriptions-item label="出生日期 :">{{ visitor.birthdate }}</el-descriptions-item>
                        <el-descriptions-item label="手机号码 :">{{ visitor.phone }}</el-descriptions-item>
                        <el-descriptions-item label="婚姻状况 :">{{ visitor.isMarry == 0 ? '未婚' : '已婚'
                            }}</el-descriptions-item>
                        <el-descriptions-item label="当前住址 :">{{ visitor.param.cityString }}</el-descriptions-item>
                        <el-descriptions-item label="详细住址 :">{{ visitor.fullAddress }}</el-descriptions-item>
                    </el-descriptions>
                    <div class="confirm" v-show="index == activeIndex">已选择</div>
                </div>
            </div>
        </el-card>

    </div>
</template>

<script setup lang="ts">
import { Edit } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';

let props = defineProps(['visitor', 'index', 'activeIndex'])
let $router = useRouter()
const editHandle = () => {
    $router.push(`/user/add?id=${props.visitor.id}&type=edit`)
}
</script>

<style scoped lang="scss">
.visitor {

    ::v-deep .el-card__body {
        padding: 0;
    }

    .card {

        .top {
            background-color: #eee;
            width: 100%;
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .name {
                color: #7f7f7f;

                span {
                    background-color: #fff;
                    margin-right: 5px;
                    font-size: 12px;
                    padding: 3px;
                }
            }
        }

        .bottom {
            position: relative;

            ::v-deep .el-descriptions__cell {
                padding-bottom: 12px !important;
            }

            .content {
                padding: 20px;
            }

            .confirm {
                position: absolute;
                width: 80%;
                height: 50%;
                color: red;
                border-radius: 50%;
                border: 1px dashed red;
                text-align: center;
                line-height: 160px;
                top: 20%;
                opacity: .2;
                transform: rotate(45deg);
                font-weight: bold;
            }
        }
    }
}
</style>